<!--
 # 卡片组件：
 ## 设计理念：
 - 卡片，方形，上方有覆盖时灰色，无覆盖时白色。
 - 需要定位，整个画布切割成棋盘，一张卡片占一个网格，并确定应该有层级，前后层要上下错位半格，实现十字覆盖。
 - 定位根据卡片位于网格的第几行列，比如第三行第四列（x3，y4），然后根据卡片本身宽高相乘。
 - 先按方形，后实现长方形。
 - 卡片图片，根据卡片类型展示不同的图片。
 -->
<template>
  <div class="card" @click="clickCard">
    <img :src="imgs[node.type]" width="40" height="40" :style="{position: 'absolute', top: `${node.top}px`, left: `${node.left}px`, zIndex: node.zIndex}" alt="">
    <div v-if="isFreeze" class="mask" />
  </div>
</template>

<script lang="ts">
  import { computed } from 'vue';
  type CardNode = {
    id: string           // 节点id zIndex-index
    type: number         // 类型
    zIndex: number       // 图层
    index: number        // 所在图层中的索引
    parents: CardNode[]  // 父节点
    row: number          // 行
    column: number       // 列
    top: number
    left: number
    state: number        // 是否可点击 0： 无状态  1： 可点击 2：已选 3：已消除
  }
  export default {
    props: {
      isDock: Boolean,
      node: CardNode
    },
    setup(props, { emit }) {
      const module = require.context('../assets/', false, /\.jpg$/)
      console.log(module.keys())
      const imgs = {};
      module.keys().forEach(img => {
        const key = img.replace(/^\.\/|[.jpg]/g, '')
        const value = `../assets${img.replace(/^\./, '')}`
        console.log(key);
        imgs[key] = value;
      });
      console.log(imgs);

      const img = {
        type: '',
        zIndex: 0,
        top: 0,
        left: 0
      }
      const clickCard = () => {
        if (!isFreeze.value) emit('clickCard', props.node);
        console.log('c');
      }
      const isFreeze = computed(_ => {
        return props.node.parents.length > 0 ? props.node.parents.some(n => n.state < 2) : false
      })
      return {
        imgs,
        img,
        clickCard,
        isFreeze
      }
    }
  }

</script>

<style scoped lang="scss">
  .card{
    width: 40px;
    height: 40px;
    background: #fff;
    color:#000;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-radius: 4px;
    border: 1px solid #000;
    box-shadow: 1px 5px 5px -1px #000;
    cursor: pointer;
  }
  .mask {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.55);
    width: 40px;
    height: 40px;
    pointer-events: none;
  }
</style>
